.wrapper {
  position: relative;

  .document-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    .document-infer {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 0 7px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent !important;
      border-radius: 4px;
      border: 1px solid transparent !important;
      box-shadow: none;
      transition: all 0.1s;

      span {
        margin-left: 4px;
        font-size: 12px;
        line-height: 12px;
        display: none;
      }
      svg {
        width: 16px;
        height: 16px;
      }
    }

    .document-infer {
      color: #ffffff;
      svg {
        position: relative;
        top: 1px;
        color: #959ba6;
      }
    }
  }

  &:hover {
    .document-btn {
      .document-infer {
        width: 100%;
        margin: 0;
        border-radius: 0px 0px 3px 3px;
        border-color: transparent !important;
        span {
          display: inline;
        }
      }

      .document-infer-focus {
        background: var(--primary-color) !important;
        border-color: transparent !important;
        svg {
          color: #fff;
        }
      }
    }
  }
}
